<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Users</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/admin-page-title :: admin-page-title ('Users Administrative Page')"></div>

<br><br>

<div class="container" id="main">
    <form v-on:submit.prevent="postUser">
        <div class="card mb-auto">
            <div aria-controls="userForm" aria-expanded="false" class="card-header" data-target="#userForm"
                 data-toggle="collapse" style="cursor: pointer">
                <div class="float-left">New/Edit User</div>
                <div class="float-right">+</div>
            </div>
            <div class="card card-body collapse" id="userForm">
                <div class="form-group row">
                    <label for="firstName" class="col-sm-4 col-form-label">First Name</label>
                    <input id="userId" type="hidden" v-model="user_id">
                    <input class="form-control col-sm-8" id="firstName" placeholder="First Name" type="text"
                           v-model="user_firstName"/>
                </div>
                <div class="form-group row">
                    <label for="lastName" class="col col-sm-4">Last Name</label>
                    <input class="form-control col-sm-8" id="lastName" placeholder="Last Name" type="text"
                           v-model="user_lastName"/>
                </div>
                <div class="form-group row">
                    <label for="roleName" class="col col-sm-4">Role Name</label>
                    <select class="form-control col-sm-8" id="roleName" placeholder="Role Name" v-model="user_roleId">
                        <option disabled value="">Please select a Role</option>
                        <option :selected="role.id === user_roleId" v-bind:value="role.id" v-for="role in roles">{{
                            role.name }}
                        </option>
                    </select>
                </div>
                <div class="form-group row">
                    <div class="col col-sm-4"></div>
                    <input class="btn btn-primary col col-sm-8" type="submit" value="Save">
                </div>
            </div>
        </div>
    </form>

    <br><br>

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Role</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users">
            <td>{{ user.firstName }}</td>
            <td>{{ user.lastName }}</td>
            <td>{{ user.role.name }}</td>
            <td>
                <button class="btn btn-primary" v-on:click="editUser(user)">Edit</button>
                <button class="btn btn-danger" v-on:click="deleteUser(user)">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Vue imports -->
<script src="webjars/vue/vue.min.js"></script>
<script src="webjars/axios/dist/axios.min.js"></script>
<!-- Actual Vue.js script -->
<script>
    var app = new Vue({
        el: '#main',
        data() {
            return {
                user_id: null,
                user_firstName: null,
                user_lastName: null,
                user_roleId: null,
                users: null,
                roles: null
            }
        },
        mounted() {
            this.getUsers();
        },
        methods: {
            getUsers: function () {
                axios
                    .get("/api/v1/users")
                    .then(response => (this.users = response.data));
                axios
                    .get("/api/v1/roles")
                    .then(response => (this.roles = response.data))
            },
            postUser: function (event) {
                // Creating
                if (this.user_id == '' || this.user_id == null) {
                    axios
                        .post("/api/v1/users", {
                            "firstName": this.user_firstName,
                            "lastName": this.user_lastName,
                            "roleId": this.user_roleId
                        })
                        .then(savedUser => {
                            this.users.push(savedUser.data);
                            this.user_firstName = '';
                            this.user_lastName = '';
                            this.user_id = '';
                            this.user_roleId = null;
                        })
                } else { // Updating
                    axios
                        .post("/api/v1/users", {
                            "id": this.user_id,
                            "firstName": this.user_firstName,
                            "lastName": this.user_lastName,
                            "roleId": this.user_roleId
                        })
                        .then(savedUser => {
                            this.getUsers();
                            this.user_firstName = '';
                            this.user_lastName = '';
                            this.user_id = '';
                            this.user_roleId = '';
                        })
                }
            },
            editUser: function (user) {
                this.user_id = user.id;
                this.user_firstName = user.firstName;
                this.user_lastName = user.lastName;
                this.user_roleId = user.role.id;
                document.getElementById('userForm')
                    .setAttribute("class", document.getElementById('userForm').getAttribute("class") + " show");
            },
            deleteUser: async function (user) {
                await axios
                    .delete("/api/v1/users/" + user.id);
                this.getUsers();
            }
        }
    })
</script>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
